<template>
  <div class="home">
    <el-scrollbar>
      <div>
        <div class="header">
          <nav-bar></nav-bar>
        </div>
        <div class="main-box" :class="{ active: viewType === 'drag' }">
          <template v-if="viewType === 'drag'">
            <div class="layout-div" v-show="pattern === '编辑模式'">
              <tags-container></tags-container>
            </div>
            <div class="layout-div">
              <view-container
                :pattern.sync="pattern"
                ref="view"
              ></view-container>
            </div>
            <div class="layout-div" v-show="pattern === '编辑模式'">
              <tools-container @lock="lock"></tools-container>
            </div>
          </template>
          <template v-else>
            <el-row :gutter="5">
              <el-col :lg="5" v-show="pattern === '编辑模式'">
                <div style="padding: 10rem 10rem 10rem 0">
                  <tags-container></tags-container>
                </div>
              </el-col>
              <el-col :lg="pattern === '编辑模式' ? 14 : 24">
                <view-container :pattern.sync="pattern"></view-container>
              </el-col>
              <el-col :lg="5" v-show="pattern === '编辑模式'">
                <div style="padding: 10rem">
                  <tools-container></tools-container>
                </div>
              </el-col>
            </el-row>
          </template>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import TagsContainer from '../components/TagsContainer';
import ToolsContainer from '../components/ToolsContainer';
import ViewContainer from '../components/ViewContainer';
import navBar from './navBar.vue';
import { mapGetters } from 'vuex';
export default {
  name: 'Home',
  data() {
    return {
      pattern: '编辑模式',
      draggable: false
    };
  },
  provide() {
    return {
      homeExample: this
    };
  },
  watch: {
    pattern: {
      handler(val) {
        if (val === '编辑模式') {
          $('html').css('font-size', '1px');
        } else {
          $('html').css('font-size', '1.4px');
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(['viewType', 'canvasList'])
  },
  props: {},
  components: {
    TagsContainer,
    ToolsContainer,
    ViewContainer,
    navBar
  },
  methods: {
    lock(val) {
      this.draggable = val;
    },
    openDialog(type) {
      this.$refs.view.openDialog(type);
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  overflow: hidden;
  ::v-deep {
    .el-scrollbar {
      height: 100%;
    }
    .is-horizontal {
      display: none;
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .pr {
    position: relative;
  }
  .header {
    height: 50rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .main-box {
    min-width: 1024px;
    // padding: 0 15px;
    height: calc(100vh - 50rem);
    &.active {
      display: flex;
    }
    .layout-div {
      &:nth-child(1) {
        width: 45%;
        position: relative;
        padding: 10rem 10rem 10rem 0;
      }
      &:nth-child(2) {
        width: 100%;
        position: relative;
      }
      &:nth-child(3) {
        width: 45%;
        margin: 0 5rem;
        padding: 10rem;
      }
    }
  }
}
</style>